<script>
import timeFormat from "uview-ui/libs/function/timeFormat";

export default {
  name: "detail",
  methods: {timeFormat},
  data() {
    return {
      detail: {},
      expressInfo: []
    }
  },
  onLoad({ id }) {
    this.$api.orderDetail({
      id
    }).then(res => {
      console.log(res)
      this.detail = res
      this.expressInfo = res.express_info ? JSON.parse(res.express_info) : []
      console.log('expressInfo', this.expressInfo )
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<template>
  <div class="order-detail">
    <div class="order-item">
      <div class="order-header">
        <span>{{ detail.express_code }}：{{ detail.express_no }}</span>
      </div>
      <u-line></u-line>
      <div class="order-content">
        <u-time-line>
          <u-time-line-item nodeTop="2" v-for="item in expressInfo">
            <!-- 此处自定义了左边内容，用一个图标替代 -->
            <template v-slot:content>
              <view style="display: flex;align-items: center">
                <view class="u-order-title" style="margin-right: 5px;font-size: 32rpx;font-weight: bold">{{ item.title }}</view>
                <view class="u-order-time">{{ $u.timeFormat(item.date, 'mm-dd hh:MM') }}</view>
              </view>
              <view>
                <view class="u-order-desc">{{ item.content }}</view>
              </view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order-detail {
  box-sizing: border-box;
  padding: 10px;
  background-color: #f7f8fa;
  height: 100%;
  overflow: auto;
  .order-item {
    border-radius: 10rpx;
    background-color: #FFFFFF;
    .order-content {
      padding: 10px;
    }
    .order-header {
      line-height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
    }
    .button-list {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 20rpx;
    }
    .image-list {
      display: flex;
      flex-wrap: wrap;
      .image-item {
        padding: 20rpx;
      }
    }
  }
}
</style>